<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		#bg{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			z-index: -4;
		}
		#myCanvas{
			position: fixed;
			left: 0;
			top: 0;
			z-index: -3;
			opacity: 1;
			/* filter: blur(4px); */
		}
		#mask{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			z-index: -2;
			mix-blend-mode: multiply;
			/* filter: blur(30px); */
		}
		#overlight{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(to right, transparent -50%, #c7c7c733 100%);
		}
		.light{
			position: absolute;
			right: 0;
			width: 2000px;
			height: 20px;
			background-color: #ffe3dc;
			filter: blur(16px);
			top: 80px;
			transform: rotate(-10deg);
			opacity: .6;
			transform-origin: right;
		}
		.light:nth-child(2){
			top: 240px;
			transform: rotate(-16deg);
			opacity: .8;
		}
		.light:nth-child(3){
			height: 60px;
			top: 380px;
			/* top: 250px; */
			transform: rotate(-20deg);
			opacity: .4;
		}
		.light:nth-child(4){
			height: 20px;
			/* top: -80px; */
			top: 520px;
			transform: rotate(-24deg);
			opacity: .3;
			filter: blur(20px);
		}
		.grid{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			mix-blend-mode: screen;
		}
		.grid .l{
			position: absolute;
			top: -300px;
			right: -100px;
			width: 200px;
			height: 1000px;
			background-color: #fff;
			filter: blur(80px);
			opacity: .5;
		}
		.origin{
			position: fixed;
			right: 0;
			top: 0;
			width: 1000px;
			height: 750px;
			background-color: #ffdac733;
			border-radius: 50%;
			transform: translate(50%,-50%);
			filter: blur(100px);
			opacity: .6;
		}
		.origin1{
			width: 600px;
			height: 250px;
			filter: blur(100px);
			background-color: #ffdfd2aa;
		}
		.origin2{
			width: 300px;
			height: 100px;
			filter: blur(50px);
			background-color: #fff;
		}
		#lightOrigin{
			position: fixed;
			right: 0;
			top: 0;
		}
		#particleLayer{
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
		.particle{
			position: absolute;
			left: 50px;
			top: 200px;
			width: 10px;
			height: 10px;
			background-color: #fff;
			border-radius: 50%;
			animation: sparcle 10s linear forwards infinite;
			/* box-shadow: 0 0 2px #fff, 0 0 10px 2px rgba(255,255,255,1); */
			opacity: 0;
		}
		@keyframes sparcle{
			0%{transform: translate(0,0);opacity: 0;}
			10%{transform: translate(0,-50px);opacity: 1;}
			95%{transform: translate(0,-475px);opacity: 1;}
			100%{transform: translate(0,-500px);opacity: 0;}
		}
	</style>
</head>
<body>
<div id="mask">
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="grid">
		<div class="l"></div>
	</div>
</div>
<div id="lightOrigin">
	<div class="origin"></div>
	<div class="origin origin2"></div>
	<div class="origin origin1"></div>
</div>
<div id="bg"></div>
<div id="overlight"></div>
<div id="particleLayer"></div>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
!function(w,e){
	function Demo(options){
		Object.assign(this,{
			el: "#myCanvas",
			canvas: null,
			cx: null,
			ms: 0
		},options)
		this.init()
	}
	Demo.prototype.expend = function(obj){Object.assign(this,obj)}
	Demo.prototype.expend({
		init(){
			this.canvas = e.querySelector(this.el)
			this.mainWidth = w.innerWidth
			this.mainHeight = w.innerHeight
			this.canvas.setAttribute("width",this.mainWidth)
			this.canvas.setAttribute("height",this.mainHeight)
			this.cx = this.canvas.getContext("2d")
			this.addevents()
			this.start()
		},
		addevents(){
			w.addEventListener("resize",() => {
				this.mainWidth = w.innerWidth
				this.mainHeight = w.innerHeight
				this.canvas.setAttribute("width",this.mainWidth)
				this.canvas.setAttribute("height",this.mainHeight)
			})
		},
		start(){
			var img1 = new Image()
			var img2 = new Image()
			var img3 = new Image()
			img1.src = "imgs/1.png"
			img2.src = "imgs/2.png"
			img3.src = "imgs/3.png"
			var imgList = [img1,img2,img3]
			this.pList = []
			for(let i = 0; i < 20; i++){
				// 先给一百朵云
				this.pList.push({
					source: imgList[Math.floor(Math.random()*3)],
					pos: [Math.floor(Math.random() * this.mainWidth), Math.floor(Math.random() * this.mainHeight)*1.4],
					rotate: Math.random(), // 位置和旋转将来给动画
					age: 0,
					size: Math.floor(Math.random()*50) + 600,
					phase: Math.random()*4 ,// 随机相位
					speed: Math.random()-.5 > 0 ? Math.random() : -Math.random(), // 旋转速度
					rdmOpacity: Math.random() * .4 + .2
				})
			}
			this.cTimer = setInterval(() => {
				this.pList.push({
					source: imgList[Math.floor(Math.random()*3)],
					pos: [Math.floor(Math.random() * this.mainWidth), Math.floor(Math.random() * this.mainHeight)+800],
					rotate: Math.random(), // 位置和旋转将来给动画
					age: 0,
					size: Math.floor(Math.random()*50) + 200,
					phase: Math.random()*4 ,// 随机相位
					speed: Math.random()-.5 > 0 ? Math.random() : -Math.random(), // 旋转速度
					rdmOpacity: Math.random() * .4 + .2
				})
				if(this.pList.length > 200) this.pList.shift() // 踢出多余的粒子
			},280) // 每一百毫秒发射一个粒子
			// 
			this.cx.globalAlpha = .2
			this.draw(() => { // 每秒 60 fps 执行一次的代码
				// 绘制
				this.pList.forEach(p => {
					p.age += 16
					
					var pos = []
					// 翻滚
					p.rotate += .002 * p.speed
					// 升起
					p.pos[1] -= .4
					// 来点波动吧
					pos[0] = p.pos[0] + Math.sin(this.ms / 1500 + p.phase) * 20
					pos[1] = p.pos[1] + Math.sin(this.ms / 1400 + p.phase) * 20
					this.cx.save()
					this.cx.translate(pos[0],p.pos[1])
					this.cx.rotate(p.rotate)
					// this.cx.globalAlpha = p.rdmOpacity
					this.cx.drawImage(p.source,-p.size/2,-p.size/2,p.size,p.size)
					this.cx.restore()
				})
				var scale = (Math.sin(this.ms / 500) + 1) / 8
				var scale2 = (Math.sin(this.ms / 6) + 1) / 24
				lightOrigin.style.transform = `scale(${ scale + scale2 + .8 })`
			})
			
		},
		draw(frame){
			this.timer = setInterval(() => {
				this.ms = performance.now() // 当前时间轴 / 毫秒
				this.cx.save()
				this.cx.clearRect(0,0,this.mainWidth,this.mainHeight)
				frame()
				this.cx.restore()
			},16)
		}
	})
	w.Demo = Demo
}(window,document)
new Demo()
!function bornParticle(){
	for(var i = 0; i < 20; i++){
		var p = document.createElement("div");
		p.className = "particle";
		particleLayer.appendChild(p);
		p.style.left = Math.random() * window.innerWidth + "px";
		p.style.top = Math.random() * window.innerHeight + 500 + "px";
		p.style.animationDelay = Math.random() * 10 + "s";
		p.style.animationDuration = Math.random() * 4 + 6 + "s";
		var rdmWidth = Math.floor(Math.random() * 3) + 1;
		p.style.width = rdmWidth + "px";
		p.style.height = rdmWidth + "px";
	}
}()
</script>
</body>
</html>
